<template>
  <ve-ring :data="chartData" :extend="extend"></ve-ring>
</template>

<script>
export default {
  data() {
    return {
      list: [
        // { value: 40, name: "直属用户" },
        // { value: 20, name: "团队收益" },
        // { value: 40, name: "推荐奖" }
      ],
      extend: {
        legend: {
          orient: "vertical",
          icon: "circle",  
          width: "100",
          x: "right",
          y: "top",
          align:'left',
          padding:[50,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          formatter: name => {
            var total = 0;
            var target;
            for (var i = 0; i < this.list.length; i++) {
              total += this.list[i].value;
              if (this.list[i].name == name) {
                target = this.list[i].value;
                return name + "   |  " + target + "%";
              }
            }
          }
        },
        grid: {
          left: "20",
          top: "20",
          right: "20",
          bottom: "40"
        },
        graphic: {
          type: "text",
          left: "center",
          top: "30%",
          style: {
            text: "累计收益0",
            textAlign: "center",
            fill: "#000",
            width: 30,
            height: 30,
            font: '1em "STHeiti", sans-serif'
          }
        },
        series: {
          color: ["#F56C6C", "#E6A23C", "#67C23A", "#409EFF",'#3ac297'],
          center: ["50%", "35%"],
          labelLine: {
            show: false
          },
          label: {
            show: false
          },
          radius: ["40%", "55%"],
          itemStyle: {
            shadowBlur: 15,
            normal: {
              borderWidth: 5, 
              borderColor: '#fff',
            },
           
          }
        },
        tooltip:{
          formatter :'{b}:{c}'
        }
      },

      chartData: {
        columns: ["name", "val"],
        rows: [
          // { name: "直属用户", val: '0.2' },
          // { name: "团队收益", val: '0.2' },
          // { name: "推荐奖", val: '0.6'}
        ]
      }
    };
  }
};
</script>
